<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./bootstrap.css">
</head>
<body>
  <div id="app">
    <comment-app></comment-app>
  </div>
  <script src="./vue.js"></script>
  <script>
    /* 
      commentApp 数据
        commentInput
        commentList 
          commentItem
      
      如果数据放在commentApp

        Input -> App 子父
        App -> List 父子
        List -> Item 父子

        删除
        Item -> App 非父子


      如果数据放在commentList
        List -> Item  父子
        input -> list   非父子

        item ->list  子父
        
    */
    const bus = new Vue()

    const commentApp = {
      template: `
        <div class="container">
          <commentInput @send:comment="getComment"></commentInput>
          <commentList :comments="comments"></commentList>
        </div>
      `,
      data () {
        return {
          comments: []
        }
      },
      methods: {
        getComment (comment) {
          this.comments.push(comment)
        }
      },
      created () {
        bus.$on('del:comment', (index) => {
          this.comments.splice(index, 1)
        })
      }
    }
    const commentInput = {
      template: `
        <div class="commentInput">
          <div class="form-group">
            <input type="text" class="form-control" v-model="comment.username">
          </div>
          <div class="form-group">
            <textarea class="form-control" v-model="comment.content"></textarea>
          </div>
          <div class="form-group clearfix">
            <button class="btn btn-success pull-right" @click="sendComment">发布</button>
          </div>
        </div>
      `,
      data () {
        return {
          comment: {
            username: '',
            content: ''
          }
        }
      },
      methods: {
        sendComment () {
          this.comment.postDate = Date.now()
          // 将comment发给app
          this.$emit('send:comment', Object.assign({}, this.comment))
        }
      }
    }

    const noData = {
      template: `
        <div class="list-group" v-else>
          <a href="#" class="list-group-item disabled">
            暂无评论
          </a>
        </div>
      `
    }

    const commentList = {
      template: `
        <div>
          <div class="list-group" v-if="comments.length">
            <commentItem v-for="(comment, index) in comments" :key="index" :comment="comment" :index="index"></commentItem>
          </div>
          <noData v-else></noData>
        </div>
      `,
      props: ['comments']
    }
    const commentItem = {
      template: `
        <a href="javascript:;" class="list-group-item" >
          <button type="button" class="close" @click="sendIndex(index)"><span>&times;</span></button>
          <h4 class="list-group-item-heading">{{comment.username}}:</h4>
          <p class="list-group-item-text">{{comment.content}}</p>
          <p class="text-muted text-right">{{comment.postDate}}</p>
        </a>
      `,
      props: ['comment', 'index'],
      methods: {
        sendIndex (index) {
          bus.$emit('del:comment', index)
        }
      }
    }
    
    Vue.component('commentApp', commentApp)
    Vue.component('commentInput', commentInput)
    Vue.component('commentList', commentList)
    Vue.component('commentItem', commentItem)
    Vue.component('noData', noData)
    const app = new Vue({
      el: "#app"
      
    })


  </script>
</body>
</html>